<template>
	<view class=""  :style="{'--themcolor':usethemestore.themecolor,'--themcolor2':usethemestore.themecolor2}">
		<view class="fixtop">
			<fixtitletopVue>
				<template #l>
					<view class="fix-l" @click="back">
						<view>
							<view class="iconfont icon-jiantou"></view>
						</view>
					</view>
				</template>
				<template #c>
					<view class="fix-c">
						设置
					</view>
				</template>
			</fixtitletopVue>
		</view>
		<view class="conbox">
			<view class="itembox">
				<view class="img-item">
					<view class="item-l">头像</view>
					<view class="item-r" @click="changeimg">
						<image v-if="ishttpsimg" :src="useuserstore.userinfo.img" mode="aspectFill"></image>
						<image v-else :src="'http://127.0.0.1:3006'+useuserstore.userinfo.img" mode="aspectFill"></image>
						<view class="iconfont icon-jiantou"></view>
					</view>
				</view>
				<view class="img-item">
					<view class="item-l">名称</view>
					<view class="item-r"  @click="editname">
						<view class="item-r-l">{{useuserstore.userinfo.name}}</view>
						<view class="iconfont icon-bianji" style="transform: none;margin-top: 5rpx;"></view>
					</view>
				</view>
				<view class="img-item">
					<view class="item-l">ID</view>
					<view class="item-r">
						<view class="item-r-l">141431</view>
						<view class="iconfont icon-fuzhi" style="transform: none;margin-top: 6rpx;" @click="clipbord(111)"></view>
					</view>
				</view>
			</view>
			<view class="exitbt" @click="exitlogin">退出登录</view>
		</view>
	</view>

</template>

<script setup>
	import {onReady} from '@dcloudio/uni-app'
	import {computed} from 'vue'
	import fixtitletopVue from '../../components/fixtitletop/fixtitletop.vue';
	import userstore from '@/store/user.js'
	import {
		getstatusheight,
		gettitleheight
	} from '@/util/getsysinfo.js'
	import themestore from '@/store/theme.js'
	import {supdateimg,supdatename} from '@/api/index.js'
	const usethemestore = themestore()
	const heights = getstatusheight() + gettitleheight() + 'px'
	const useuserstore=userstore()
	const ishttpsimg=computed(()=>{
		return useuserstore.userinfo.img.startsWith('https')
	})
	const back = () => {
		uni.navigateBack()
	}
	const exitlogin=()=>{
		uni.showModal({
			title:"提示",
			content:"确定要退出登录吗？",
			success(e) {
				if(e.cancel)return
				useuserstore.token=""
				useuserstore.userinfo=""
				uni.reLaunch({
					url:"/pages/wxlogin/wxlogin"
				})	
			}
		})
	}
	const changeimg=()=>{
		 uni.chooseImage({
		 	count:1,
			success(e) {
				console.log(e)
				sendupdateimg(e.tempFilePaths[0])
				console.log(e.tempFilePaths[0])
			}
		 })
	}
	const sendupdateimg=async(path)=>{
		 const rudata=await supdateimg(useuserstore.userinfo.id,path)
		 if(rudata.code==200){
			 useuserstore.userinfo.img=rudata.imgpath
			 uni.showToast({
			 	title:"更改成功!"
			 })
		 }
	}
	const editname=()=>{
	    uni.showModal({
	    	title:"修改名称",
			placeholderText:"请输入修改的名称",
			editable:true,
			success(e) {
				if(e.cancel)return
				ssupdatename(e)
			}
	    })
	}
	const ssupdatename=async(e)=>{
		const rudata=await supdatename(useuserstore.userinfo.id,e.content)
		if(rudata.code==200){
			uni.showToast({
				title:"修改成功"
			})
			 useuserstore.userinfo.name=rudata.name
		}
	}
	const clipbord=e=>{
		uni.setClipboardData({
			data:`${e}`
		})
	}
</script>

<style lang="scss" scoped>
	.exitbt{
		height: 80rpx;
		width: 100%;
		border-radius: 20rpx;
		background-color: var(--themcolor);
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-top: 40rpx;
	}
	.conbox {
		height: calc(100vh - v-bind(heights));
		background-color: #eee;
		padding: 20rpx;

		.itembox {
			border-radius: 20rpx;
			overflow: hidden;
		}

		.img-item {
			height: 80rpx;
			width: 100%;
			background-color: #fff;
			padding: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item-l {
				font-size: 25rpx;

			}

			.item-r {
				display: flex;
				align-items: center;
				gap: 10rpx;

				.item-r-l {
					max-width: 400rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow:ellipsis;
					font-size: 25rpx;
				}

				image {
					height: 50rpx;
					width: 50rpx;
					border-radius: 10rpx;
				}

				.iconfont {
					font-size: 25rpx;
					color: #7b7b7b;
					transform: rotate(180deg);
				}
			}
		}
	}

	.fixtop {
		background-color: #eee;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #dcdcdc;

		.fix-l {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 25rpx;
			}
		}

		.fix-c {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}
</style>